<template>
  <div class="padding-xs">
    <el-table size="mini" stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" v-loading="tabLoading"
              style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange"
              :default-sort="{prop: 'date', order: 'descending'}" highlight-current-row row-key="id">
      <!-- <el-table-column type="selection" width="50" align="center"></el-table-column> -->
      <el-table-column type="index" label="序号" width="50" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流程" prop="flow_type_name" width="105" header-align="center" align="center"
                       show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-tag size="mini" type="primary" effect="plain">{{ scope.row.flow_type_name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title" min-width="100" header-align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="提交人" prop="applyer_name" width="80" header-align="center" align="center"
                       show-overflow-tooltip v-if="type==1 || type==7"
      ></el-table-column>
      <el-table-column label="提交人部门" prop="applyer_department_name" header-align="center" align="center"
                       width="140" show-overflow-tooltip v-if="type==1 || type==7"
      ></el-table-column>
      <el-table-column label="提交时间" prop="create_at" width="155" header-align="center" align="center">
      </el-table-column>
      <!-- <el-table-column label="处理结果" prop="status" width="105" header-align="center" align="center" v-if="type==7">
        <template slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.status==0" type="info">草稿</el-tag>
          <el-tag size="mini" v-else-if="scope.row.status==1" type="primary">审批中</el-tag>
          <el-tag size="mini" v-else-if="scope.row.status==2" type="success">已通过</el-tag>
          <el-tag size="mini" v-else-if="scope.row.status==3" type="danger">已删除</el-tag>
          <el-tag size="mini" v-else-if="scope.row.status==4" type="warning">被退回</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column v-if="type==1 || type==2 || type==3 || type==4 || type==7" :label="type==1?'前节点通过':
			(type==2?'最新处理':
			(type==3?'通过时间':
			(type==4?'退回时间':
			(type==7?'处理时间':''))))
			" prop="flow_at" width="155" header-align="center" align="center"
      >
      </el-table-column>
      <el-table-column v-if="type==1 || type==2 || type==7" :label="type==7?'处理节点':'当前节点'" prop="node_name" width="105"
                       header-align="center" align="center"
      >
        <template slot-scope="scope">
          <el-tag size="mini" type="primary" effect="plain">{{ scope.row.node_name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="operation">
            <el-button-group>
              <el-button type="primary" size="mini" @click="handleOne(scope.row)">{{ handleTypeBtnName }}
              </el-button>
            </el-button-group>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页数据 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page.sync="current" :page-sizes="[10, 20, 50]" :page-size="listParams.page_size"
                   layout="total, sizes, prev, pager, next, jumper" :total="total" small
    ></el-pagination>
  </div>
</template>

<script>
import handleUtil from '@/views/personal/handle/js/handle.js'
import { generateUUID } from '@/utils/util'
import distinct_arr from '@/views/personal/handle/js/routerUtil'

export default {
  name: 'DashboardToHandleListTable',
  // beforeRouteLeave(to, from, next) {
  //   this.$destroy()
  //   next()
  // },
  props: {
    getListRequest: {
      type: Function,
      required: true
    },
    type: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // list table
      tableData: [], // 列表数据
      selectIds: [], // 多选选项id
      tabLoading: false,
      total: null, // 总页数
      current: 1, // 当前页

      listParams: {
        page: 1,
        page_size: 10
      }, // list参数
      searchForm: {},
      loading: null,

      handleType: 3,
      handleTypeBtnName: '查看'
    }
  },
  mounted() {
    this.getList()
    this.getHandleType()
  },
  created() {
    setInterval(() => {
      this.getList()
      this.getHandleType()
    },30000)
  },
  methods: {
    getHandleType() {
      if (this.type == 1) {
        // 待我审批
        this.handleType = 2
        this.handleTypeBtnName = '审核'
      }
      if (this.type == 2) {
        // 我的申请
        this.handleType = 2
        this.handleTypeBtnName = '查看'
      }
      if (this.type == 3) {
        // 我的已通过
        this.handleType = 3
        this.handleTypeBtnName = '查看'
      }
      if (this.type == 4) {
        // 我的被退回
        this.handleType = 1
        this.handleTypeBtnName = '编辑'
      }
      if (this.type == 5) {
        // 草稿箱
        this.handleType = 1
        this.handleTypeBtnName = '编辑'
      }
      if (this.type == 6) {
        // 回收站
        this.handleType = 1
        this.handleTypeBtnName = '编辑'
      }
      if (this.type == 7) {
        // 审批记录
        this.handleType = 3
        this.handleTypeBtnName = '查看'
      }
    },
    handleOne(row) {
      const that = this
      const tmp_arr = distinct_arr
      console.log(tmp_arr)
      const uuid = generateUUID()
      this.$store.commit('keep/PUT_PAGE_PARAMS', {
        uuid: uuid,
        data: handleUtil.genRedirectParam(row.id, row.data_id, this.handleType, this.type, row.flow_type)
      })
      const flowTypeRouter = that.$store.getters.getFlowTypeRouter(row.flow_type)
      if (tmp_arr.includes(flowTypeRouter)) {
        this.$router.push({
          name: flowTypeRouter,
          query: {
            uuid: uuid
          }
        })
      } else {
        that.$router.push({
          name: flowTypeRouter,
          params: handleUtil.genRedirectParam(row.id, row.data_id, this.handleType, this.type, row.flow_type)
        })
      }
    },
    getList() {
      this.tabLoading = true
      return this.getListRequest(this.listParams)
        .then(res => {
          let {
            data: {
              records,
              total
            }
          } = res

          this.tableData = records.map(item => {
            return item
          })
          this.total = total
          this.tabLoading = false
        })
        .catch(() => {
          this.tabLoading = false
        })
    },

    // 表单多选
    handleSelectionChange(val) {
      this.selectIds = val.map(item => item.id)
    },
    // 分页 -pageSize改变
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    // 分页 -pageNum改变
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    //带状态表格
    tableRowClassName({
      row
    }) {
      return ''
    }

  }
}
</script>

<style>
</style>
